<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <title>BOXANHFOOD MANAGEMENT</title>
  <link rel="shortcut icon" href="<?php echo Yii::app()->request->baseUrl; ?>/contents/Images/favicon.ico" type="image/x-icon" />
  <style>
        body {
	margin: 0;
    padding: 0;
    background: #f4f4f4;
    font: 14px;
    font-family: Tahoma;
    background: url('<?php echo Yii::app()->request->baseUrl; ?>/images/bg.png')
}

.link { text-align: center; clear: both; padding: 20px 0; }
.link a { color: #333333; }

.wrapper {
    margin-top: 150px;
    width: 450px;
    margin-left: auto;
    margin-right: auto;
}

/* Form 1 style */

.form1 {
	width: 450px;
	float: left;
	background: #fff;
	color: #777;
	-webkit-box-shadow: 0px 0px 8px 2px #d1d1d1;
	-moz-box-shadow: 0px 0px 8px 2px #d1d1d1;
	box-shadow: 0px 0px 8px 2px #d1d1d1; 
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px; 
	overflow: hidden;
}

.formtitle {
    padding: 10px;
    line-height: 16px;
    font-size: 13px;
    text-align: center;
    color: #857D7D font-weight: bold;
    border-bottom: 1px solid #E6D9CA;
    width: 430px;
    background: -webkit-linear-gradient(top, #F1F1F4 0%,#F1F1F4 50%,#F1F1F4 51%,#F1F1F4 100%);
    font-size: 10pt;
    background: #2A972F;
    color: white;
}

.input {
	width: 410px;
	border-bottom: 1px solid #ddd;
	margin-bottom: 10px;
	margin: 20px;
	overflow: hidden;
}

.inputtext {    
	float: left;
	line-height: 29px;
	height: 35px;
	font-size: 14px;
	width: 87px;
	margin-left: 30px;
}

.inputcontent {
	float: left;
	width: 290px;
	height: 50px;
}

.inputcontent input {
	padding: 5px;
	height: 18px;
	width: 248px;
	line-height: 18px;
	border: 1px solid #c7c7c7;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	color: #777;
}

.inputcontent a {
	color: #0084ff;
	font-size: 12px;
	text-decoration: none;
	line-height: 12px;
}

.nobottomborder {
	border-bottom: 0;
}

.buttons {
	background: #f1f1f1;
	border-top: 1px solid #ddd;
	padding: 15px;
	height: 34px;
    background: #2A972F;
    color: white;
}

.greybutton {
	background: #e1e1e1; /* Old browsers */
	background: -moz-linear-gradient(top, #e1e1e1 0%, #bababa 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#e1e1e1), color-stop(100%,#bababa)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e1e1e1', endColorstr='#bababa',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #e1e1e1 0%,#bababa 100%); /* W3C */ 
	border: 1px solid #bababa;
	-webkit-border-radius: 20px;
	-moz-border-radius: 20px;
	border-radius: 20px; 
	line-height: 20px;
	font-size: 16px;
	padding: 6px 12px;
	color: #fff;
	text-shadow: -1px -1px #bababa;
	float: right;
	margin-left: 10px;
	cursor: pointer;
}

.greybutton:hover{
	background: #bababa; /* Old browsers */
	background: -moz-linear-gradient(top, #bababa 0%, #e1e1e1 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#bababa), color-stop(100%,#e1e1e1)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* Opera11.10+ */
	background: -ms-linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* IE10+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#bababa', endColorstr='#e1e1e1',GradientType=0 ); /* IE6-9 */
	background: linear-gradient(top, #bababa 0%,#e1e1e1 100%); /* W3C */ 
}

.orangebutton {
	border: 1px solid #3079ed;
	color: #fff;
	text-shadow: 0 1px rgba(0,0,0,0.1);
	background-color: #4d90fe;
	background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
	background-image: -moz-linear-gradient(top,#4d90fe,#4787ed);
	background-image: -ms-linear-gradient(top,#4d90fe,#4787ed);
	background-image: -o-linear-gradient(top,#4d90fe,#4787ed);
	background-image: linear-gradient(top,#4d90fe,#4787ed);
	float: right;
	padding: 5px 44px;
	border-radius: 4px;
	position: relative;
	right: 32px;
	font-weight: bold;
	-webkit-border-radius: 6px;
	cursor: pointer;
}
.errorMessage{
    color: #000;
}
.orangebutton:hover{
	border: 1px solid #c6c6c6;
	color: #333;
	text-decoration: none;
	-o-transition: all 0.0s;
	-moz-transition: all 0.0s;
	-webkit-transition: all 0.0s;
	transition: all 0.0s;
	background-color: #f8f8f8;
	background-image: -webkit-linear-gradient(top,#f8f8f8,#f1f1f1);
	background-image: -moz-linear-gradient(top,#f8f8f8,#f1f1f1);
	background-image: -ms-linear-gradient(top,#f8f8f8,#f1f1f1);
	background-image: -o-linear-gradient(top,#f8f8f8,#f1f1f1);
	background-image: linear-gradient(top,#f8f8f8,#f1f1f1);
	-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
	-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);
	box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.orangebutton-submit:hover {
border: 1px solid #2f5bb7;
color: #fff;
text-shadow: 0 1px rgba(0,0,0,0.3);
background-color: #357ae8;
background-image: -webkit-linear-gradient(top,#4d90fe,#357ae8);
background-image: -moz-linear-gradient(top,#4d90fe,#357ae8);
background-image: -ms-linear-gradient(top,#4d90fe,#357ae8);
background-image: -o-linear-gradient(top,#4d90fe,#357ae8);
background-image: linear-gradient(top,#4d90fe,#357ae8);
}

/* Form 2 Style */

.form2 {
	width: 450px;
	float: right;
	background: #fff;
	color: #777;
	-webkit-box-shadow: 0px 0px 8px 2px #d1d1d1;
	-moz-box-shadow: 0px 0px 8px 2px #d1d1d1;
	box-shadow: 0px 0px 8px 2px #d1d1d1; 
	-webkit-border-top-left-radius: 0px;
	-webkit-border-top-right-radius: 0px;
	-webkit-border-bottom-right-radius: 6px;
	-webkit-border-bottom-left-radius: 6px;
	-moz-border-radius-topleft: 0px;
	-moz-border-radius-topright: 0px;
	-moz-border-radius-bottomright: 6px;
	-moz-border-radius-bottomleft: 6px;
	border-top-left-radius: 0px;
	border-top-right-radius: 0px;
	border-bottom-right-radius: 6px;
	border-bottom-left-radius: 6px; 
	overflow: hidden;
}

.textarea {
	padding: 5px;
	height: 100px;
	width: 200px;
	line-height: 18px;
	border: 1px solid #c7c7c7;
	-moz-border-radius:6px;
	-webkit-border-radius:6px;
	border-radius:6px;
	color: #777;
}

.inputtextbox {
	width: 410px;
	margin-bottom: 10px;
	margin: 20px;
	overflow: hidden;
}

.inputtextbox .inputcontent {
	height: 114px;
}
#login-form{
    background: #E95223;
	color: white;
}
.row{
margin-bottom:10px;
margin-left:20px;
}
.row label{
width: 100px;
}
.note{
margin-left:20px;
}
#LoginForm_password{
margin-left: 6px;
}
  </style>
  <meta http-equiv="content-type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <link rel="stylesheet" href="style.css" type="text/css" />
</head>
<body>

	<div class="wrapper">

		<div class="form">
        <div class="formtitle">Welcome to BoxanhFood Management</div>
<?php $form=$this->beginWidget('CActiveForm', array(
	'id'=>'login-form',
	'enableClientValidation'=>true,
	'clientOptions'=>array(
		'validateOnSubmit'=>true,
	),
)); ?>

	<p class="note" style="
    margin-top: 0;
">Fields with <span class="required">*</span> are required.</p>

	<div class="row">
		<?php echo $form->labelEx($model,'username'); ?>
		<?php echo $form->textField($model,'username'); ?>
		<?php echo $form->error($model,'username'); ?>
	</div>

	<div class="row">
		<?php echo $form->labelEx($model,'password'); ?>
		<?php echo $form->passwordField($model,'password'); ?>
		<?php echo $form->error($model,'password'); ?>
<!--
		<p class="hint">
			Hint: You may login with <kbd>demo</kbd>/<kbd>demo</kbd> or <kbd>admin</kbd>/<kbd>admin</kbd>.
		</p>
-->
	</div>

	<div class="row rememberMe">
		<?php echo $form->checkBox($model,'rememberMe'); ?>
		<?php echo $form->label($model,'rememberMe'); ?>
		<?php echo $form->error($model,'rememberMe'); ?>
	</div>

	<div class="buttons">
		<?php echo CHtml::submitButton('Login'); ?>
	</div>

<?php $this->endWidget(); ?>
</div><!-- form -->

	</div>	


</body>
</html>